"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

const links = [
  { href: "/performance", text: "Performance" },
  { href: "/reliability", text: "Reliability" },
  { href: "/scale", text: "Scale" },
];

export const Header = () => {
  const pathname = usePathname();
  return (
    <div className="absolute h-screen z-10 w-full">
      <div className="flex justify-between container w-full mx-auto p-8 text-white">
        <Link className="font-bold text-4xl" href="/">
          Home
        </Link>
        <div className="space-x-4 text-xl">
          {links.map((link) => (
            <Link
              key={link.href}
              className={pathname == link.href ? "text-purple-500" : ""}
              href={link.href}
            >
              {link.text}
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
};
